<template>
  <div>
    <h1 class="content">App</h1>
    <hr />
    <Header />
  </div>
</template>
<script>
import Header from './components/Header.vue';
export default {
  name: 'App',
  components: {
    Header,
  },
};
</script>
<style scoped>
/* 
  style标签的scoped属性
    1.我们在组件的style标签中书写的样式在打包后，其实是可以通用的，也就是不只是能控制自己组件的元素样式（这样并不一定合理）
    2.我们可以给style标签添加一个scoped属性，则这个style标签中的样式就只有对当前组件内的元素生效了
    3.scoped原理：
      1.首先给当前scoped所在的组件所有的结构添加一个自定义属性（通过是组件，则给组件的最外层元素添加）
      2.给当前scoped所在的style中所有的选择器都添加一个属性选择器，属性是当前组件结构中添加的自定义属性
      3.所以scoped所在的style中的选择器只能选择自己组件的元素或者子组件的最外层元素进行控制
*/
.content {
  width: 200px;
  height: 200px;
  background: orange;
}
</style>
